<template>
  <div>
    <nav-header></nav-header>
    <div class="userInfo">
      <div class="w">
        <el-tabs v-model="activeTabName"
                 tab-position="left"
                 style="height: 600px">
          <el-tab-pane label="设置"
                       disabled></el-tab-pane>

          <!-- 个人信息部分 -->
          <el-tab-pane name="perInformation"
                       label="个人信息">
            <el-card>
              <el-form ref="userInfoForm"
                       v-model="userInfoForm"
                       label-width="80px">
                <el-form-item label="用户昵称:">
                  <el-tag v-show="!userNameModified">{{
                    userInfoForm.userName
                  }}</el-tag>
                  <el-input v-show="userNameModified"
                            v-model="userInfoForm.userName"
                            style="width: 200px"></el-input>
                  <el-button @click="changeUserName"
                             type="primary"
                             size="mini">修改</el-button>
                </el-form-item>
                <el-form-item label="性 别：">
                  <el-radio-group v-model="userInfoForm.userSex">
                    <el-radio label="1">男</el-radio>
                    <el-radio label="2">女</el-radio>
                    <el-radio label="3">保密</el-radio>
                  </el-radio-group>
                </el-form-item>

                <el-form-item label="生 日：">
                  <el-input v-model="birthday.year"
                            style="width: 80px"
                            @change="numberChange($event, 'year')"></el-input>
                  年
                  <el-input v-model="birthday.month"
                            style="width: 80px"
                            @change="numberChange($event,'month')"></el-input>
                  月
                  <el-input v-model="birthday.day"
                            style="width: 80px"
                            @change="numberChange($event,'day')"></el-input>
                  日
                </el-form-item>
                <el-form-item>
                  <el-button type="primary"
                             size="medium"
                             @click="changeBasicInfo">保存</el-button>
                  <el-button @click="cancel"
                             size="medium">取消</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </el-tab-pane>

          <!-- 账号绑定部分 -->
          <el-tab-pane label="账号绑定">
            <el-card style="height: 200px">
              <div>账号绑定</div>
              <div class="mc">
                <div class="bindList">
                  <div class="bindQQ">
                    <svg class="icon icon-QQ">
                      <use xlink:href="#icon-QQ"></use>
                    </svg>&nbsp;&nbsp; <strong>绑定qq账号</strong>&nbsp;&nbsp;<span v-show="!qqIsBind">未绑定</span><span v-show="qqIsBind">已绑定</span>
                    <a v-show="!qqIsBind"
                       href="javascript:;"
                       style="float: right"
                       @click="goToBind('QQ')">绑定</a><a v-show="qqIsBind"
                       href="javascript:;"
                       style="float: right"
                       @click="deleteBind('QQ')">取消绑定</a>
                  </div>
                  <div class="bindWeiXin">
                    <svg class="icon icon-weixin">
                      <use xlink:href="#icon-weixin"></use>
                    </svg>&nbsp;&nbsp; <strong>绑定微信账号</strong>&nbsp;&nbsp;<span>未绑定</span>
                    <a href="javascript:;"
                       style="float: right"
                       @click="goToBind('微信')">绑定</a>
                  </div>
                  <div class="bindWeiBo">
                    <svg class="icon icon-weibo">
                      <use xlink:href="#icon-weibo"></use>
                    </svg>&nbsp;&nbsp; <strong>绑定微博账号</strong>&nbsp;&nbsp;<span>未绑定</span>
                    <a href="javascript:;"
                       style="float: right"
                       @click="goToBind('微博')">绑定</a>
                  </div>
                </div>
              </div>
            </el-card>
          </el-tab-pane>

          <el-dialog width="600px"
                     :title="title"
                     :visible.sync="dialogVisible"
                     @close="closeDialog">
            <el-form ref="accountForm"
                     :model="accountForm">
              <el-form-item>
                <template v-slot:label>{{ account }}账号&nbsp;<i class="el-icon-user"></i></template>
                <el-input style="width: 240px"
                          v-model="accountForm.userName"></el-input>
              </el-form-item>
              <el-form-item>
                <template v-slot:label>{{ account }}密码&nbsp;<i class="el-icon-lock"></i></template>
                <el-input style="width: 240px"
                          v-model="accountForm.passWord"
                          show-password></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer"
                 class="dialog-footer">
              <el-button @click="closeDialog">取 消</el-button>
              <el-button type="primary"
                         @click="bindAccount">确 定</el-button>
            </div>
          </el-dialog>

          <!-- 收货地址部分 -->
          <el-tab-pane label="收货地址">
            <el-card>
              <div class="addressList">
                <div class="mt">
                  <a id="edit-add-dialog"
                     @click="openDialog()"
                     class="add-btn"
                     href="javascript:;">新增收货地址</a>
                </div>
                <div class="mc"
                     v-for="(item, index) in addressForm"
                     :key="index">
                  <div class="addressForm">
                    <div class="smt"
                         style="height: 40px">
                      <h3 style="margin-left: 10px">
                        {{item.category}}
                        <el-tag v-if="index === 0"
                                style="margin-left: 20px">默认地址</el-tag>
                      </h3>
                    </div>
                    <div class="smc">
                      <el-form ref="item"
                               :model="item"
                               label-width="80px">
                        <el-form-item label="收货人">{{
                          item.name
                        }}</el-form-item>
                        <el-form-item label="所在地区">{{
                          item.region
                        }}</el-form-item>
                        <el-form-item label="详细地址">{{
                          item.address
                        }}</el-form-item>
                        <el-form-item label="手机">{{
                          item.phone
                        }}</el-form-item>
                        <el-form-item label="电子邮箱">{{
                          item.email
                        }}</el-form-item>
                      </el-form>
                    </div>

                    <el-button type="primary"
                               size="mini"
                               style="margin: 10px 20px"
                               icon="el-icon-edit"
                               circle
                               @click="openDialog(item)">编译</el-button>
                    <el-button type="danger"
                               size="mini"
                               style="margin: 10px 20px"
                               icon="el-icon-edit"
                               circle
                               @click="deleteById(item.id)">删除</el-button>
                  </div>
                </div>
              </div>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <address-dialog ref="addressDialog"></address-dialog>
  </div>
</template>

<script>
import navHeader from 'components/navHeader.vue'
import addressDialog from 'components/addressDialog.vue'
import { request } from 'network/request'
import { calculateAge } from 'utils/calculateAge'

export default {
  components: { navHeader, addressDialog },
  data() {
    return {
      title: '',
      dialogVisible: false,
      userNameModified: false,
      accountForm: {
        userName: '',
        passWord: '',
      },
      userInfoForm: {},
      addressForm: [],
      activeTabName: 'perInformation',
      account: '',
      qqIsBind: true,
      gender: '男',
      birthday: {
        year: '',
        month: '',
        day: '',
      },
    }
  },
  created() {
    this.getUserInfo()
    this.getUserRecAdd()
  },
  methods: {
    async getUserInfo() {
      const { data } = await request({
        url: '/account/info',
      })
      this.userInfoForm = data
      const { userBirthday } = data
      const timeArr = userBirthday.split('-')
      this.birthday['year'] = timeArr[0]
      this.birthday['month'] = timeArr[1]
      this.birthday['day'] = timeArr[2]
    },

    async getUserRecAdd() {
      const { data, count } = await request({
        url: '/recAddress',
      })
      this.addressForm = data
    },

    changeUserName() {
      this.userNameModified = !this.userNameModified
    },

    numberChange(val, params) {
      val = val.replace(/\D/g, '')
      switch (params) {
        case 'year':
          val = val < 1000 ? 1000 : val > 2021 ? 2021 : val
          this.birthday[params] = val
          break
        case 'month':
          val = val < 1 ? 1 : val > 12 ? 12 : val
          this.birthday[params] = val
          break
        case 'day':
          val = val < 1 ? 1 : val > 31 ? 31 : val
          this.birthday[params] = val
          break
      }
    },

    async changeBasicInfo() {
      let i = 0
      const birthdayArr = []
      for (let value of Object.values(this.birthday)) {
        birthdayArr[i++] = value
      }
      const userBirthday = birthdayArr.join('-')
      const userAge = calculateAge(birthdayArr)
      const { userName, userSex } = this.userInfoForm
      const { code } = await request({
        url: '/account',
        method: 'put',
        data: { userName, userSex, userAge, userBirthday },
      })
      if (code === 1) {
        this.$message({
          type: 'success',
          message: '更改成功',
        })
      }
    },

    cancel() {
      this.getUserInfo()
    },

    openDialog(item = {}) {
      this.$refs.addressDialog.openDialog(item)
    },
    goToBind(account) {
      this.account = account
      this.title = `绑定${account}账号`
      this.dialogVisible = true
    },
    closeDialog() {
      this.accountForm = {}
      this.$refs.accountForm.resetFields()
      this.dialogVisible = false
    },
    bindAccount() {
      this.dialogVisible = false
    },

    async deleteById(id) {
      await request({
        url: '/recAddress',
        method: 'delete',
        data: { id },
      })
      this.getUserRecAdd()
    },

    deleteBind(account) {
      this.$confirm(`是否确定解绑${account}`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then((_) => {
          if (account === 'QQ') {
            this.qqIsBind = false
          }
          this.$message({
            type: 'success',
            message: '解绑成功',
          })
        })
        .catch((_) => {
          this.$message({
            type: 'info',
            message: '已取消解绑',
          })
        })
    },
  },
}
</script>

<style lang="less">
.userInfo {
  background-color: #f5f5f5;
  .w {
    width: 990px;
    margin: 20px auto;
    .el-form-item .el-button {
      margin-left: 20px;
    }
    .addressList {
      .mt {
        background-color: #f5fbef;
        background-image: linear-gradient(to bottom, #f5fbef 0, #eaf6e2 100%);
        width: 120px;
        margin-bottom: 10px;
        #edit-add-dialog {
          display: inline-block;
          color: #333;
          height: 28px;
          line-height: 28px;
          font-size: 14px;
          font-weight: 700;
          padding: 0 14px;
        }
      }
      .mc {
        .addressForm {
          height: 200px;
          border: 1px solid rgba(230, 230, 230);
          .smc .el-form-item {
            margin-bottom: 0px;
            .el-form-item__label,
            .el-form-item__content {
              color: #666;
              font-size: 12px;
              height: 20px;
              line-height: 20px;
            }
          }
        }
      }
    }
  }
}
.userInfo .bindList {
  background-color: #f9f9f9;
  font-size: 12px;
  & > div {
    margin-top: 20px;
    height: 30px;
    line-height: 30px;
  }
  svg {
    width: 20px;
    height: 20px;
  }
}
</style>
